{__NOLAYOUT__}
<layout name="no_nav" />

<!-- TOPBAR -->
<header class="top-bar flex-row">
  <a class="row-item row-item-auto top-bar-back" href="javascript:window.history.back()">返回</a>
  <h3 class="row-item top-bar-name">提交订单</h3>
  <a class="row-item row-item-auto top-bar-menu" href="{$config.url}">主页</a>
</header>

<form action="__CONTROLLER__/confirmOrderPost" method="post">

  <!-- 收货地址 -->
  <section class="pr-order-item pr-order-address">

    <a class="db" href="{:U('DisShopDeliverAddress/deliverAddressList','sid='.$sid)}?buyUrl={$buyUrl}">

      <empty name="order.province">
      <p>增加收货地址</p>
      <else />
      
      <p>{$order.provinceName}&nbsp;{$order.cityName}&nbsp;{$order.areaName}&nbsp;{$order.address}</p>
      <p>{$order.name}&nbsp;&nbsp;{$order.tel}</p>
      </empty>
      
    </a>

  </section>
  
  <!-- 配送以及支付 -->
  <section class="pr-order-item">
    <p>
       <span>配送方式：</span>
       <select id="delivery-type" name="shipping_id">
       	   <foreach item="vo" name="deliveryMethod" key="key">
       	     <if condition="array_key_exists($key, $order['totalShipping'])">
       	   	  <option value="{$key}">{$vo['name']}</option>
       	   	 </if>
       	   </foreach>
       </select>
    </p>
    <p style="margin-top:10px;">
      <span>支付方式：</span>
      <select id="pay-apitype" name="apitype">{$payApiOptions}</select>  
    </p>
  </section> 
  

  <!-- 商品清单 -->
  <section class="pr-order-item pr-good-list">

    <h5 class="pr-good-list-title">商品清单：共&nbsp;{:count($order['items'])}&nbsp;件商品</h5>
    
    <section class="pr-good-list-container">
      <volist name="order.items" id="vo">
      <volist name="vo.items" id="vo_attr">
      <div class="pr-good-item flex-row">
        <a class="pr-good-pic row-item row-item-3" href="javascript:;">
          <img src="{$vo_attr.goods_pic}">
        </a>
        <div class="pr-good-info row-item row-item-7">
          <p>{$vo.goods_name}</p>
          <notempty name="vo_attr['attrs']">
          <p>规格：<foreach name="vo_attr.attrs" item="vo1" key="k">{$k}:{$vo1}&nbsp;&nbsp;</foreach></p>
          </notempty>
          <p>
            <span data-subprice="{$vo_attr['goods_price']}">单价：{$vo_attr['goods_price']}元</span>
            <span>数量：{$vo_attr.goods_number}</span>
          </p>
        </div>
      </div>
      </volist>
      </volist>
    </section>

  </section>
  
  <style type="text/css">
	body .list-title {
		margin: 0 0 5px;
		padding: 0 12px;
		line-height: 24px;
		font-size: 14px;
		font-weight: normal;
		color: #7c7b83;
		text-transform: uppercase;
		text-shadow: 0 1px rgba(255, 255, 255, 0.2);
	}
	body .modal-confirm {
		overflow-y: auto;
		background-color: #efeff4;
	}
	.btn {
		padding: 0.3em 1em;
	}
	.container-block {
		overflow: hidden;
		border-top: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
		margin: 10px 0;
		background-color: #fff;
		display: block;
		position: relative;
	}
	.container-block .block-module {
		padding: 10px 0 10px 10px;
		background-color: #fff;
		font-size: 15px;
		line-height: 22px;
		min-height: 22px;
		border: 0px none;
		position: relative;
	}
	.coupon-ui .txt-coupon-code {
		display: inline-block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 30px;
		vertical-align: middle;
		font-size: 12px;
		padding: 4px 6px;
		line-height: 18px;
		border: 1px solid #ccc;
		border-radius: 4px;
		letter-spacing: 2px;
		width: 70%;
		-webkit-appearance: none;
		-moz-appearance: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.label-check {
		cursor: pointer;
		display: block;
		position: relative;
		padding-left: 30px;
	}
	.label-check .label-check-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 20px;
		height: 20px;
		background-repeat: no-repeat;
		background-image: url("__STYLE__/DisShop/images/trade2x-1416817757559.png");
		background-size: 20px auto;
	}
	.label-check.checked .label-check-img{
		background-position: 0 -20px;
	}
	.order-coupon .radio, .order-coupon .coupon-info {
		vertical-align: top;
		line-height: 22px;
	}
	.order-coupon .coupon-info {
		display: block;
		padding-right: 10px;
		margin-top: 0;
	}
	.order-coupon .coupon-info span {
		display: inline-block;
		width: 150px;
	}
	.pr-order-item .pr-btn {
		margin-top: 0.6em;
	}
	.confirm-use-coupon {
		position: fixed;
		z-index: 10000;
		bottom: 0px;
		left: 0px;
		width: 100%;
		background: rgba(0, 0, 0, 0.8);
		color: #fff;
		padding: 10px 15px;
		line-height: 30px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		zoom: 1;
	}
	.js-change-coupon {
		position:absolute;
		top: 0.4em;
		right:1.5em;
	}
	.lh-2e5 {
		line-height: 3em;
	}
	.pr12 {
		padding-right:12px;
	}
  </style>
  
  <section class="pr-order-item">
  
    <p class="pr-order-money">
      <span>商品总金额</span>
      <span class="fr">{$order.goods_amount}元</span>
    </p>
    <p class="pr-order-money">
      <span>运费</span>
      <span class="fr" id="freight">{$order['shipping_fee']}元</span>
    </p>
    <p class="pr-order-money total">
      <span>订单总计</span>
      <span class="fr" id="total-price">{$order.totalPrice}元</span>
    </p>
    
	<if condition="in_array('pay', $order['buyerOperates'])">
    <button type="submit" class="btn btn-orange w100 pr-btn">去结算</button>
    </if>
    
	<if condition="in_array('cancel', $order['buyerOperates'])">
	<button id="order-cancel-btn" type="button" class="btn btn-white w100 pr-btn" data-id="{$order.id}">取消订单</button>
	</if>
	
  </section>

  <input type="hidden" name="orderId" value="{$order.id}">{/* 订单id（已保存待支付订单有此值） */}
  <input type="hidden" name="orderNo" value="{$order.order_no}">
  <input type="hidden" name="sid" value="{$sid}">
  
</form>

<script src="__COMMON__/js/modal.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var order = {
	  'goodsTotalPrice' : {$order.goods_amount},
  	  'shippingTotalPrice' : {$order.shipping_fee}
  }, totalShipping =  {:json_encode((object)$order['totalShipping'])};
  
  (function() {
	$("#order-pay-another-btn").click(function() {
		$("input[name='buyMethod']").val('2');
		$('form').submit();
	});
	  
	$("#order-cancel-btn").click(function() {
			$this = $(this);
			modal.confirm({
				'title': '取消订单提示',
				'text': '确定要取消此订单吗？',
				'callback': function() {
					$.ajax({
						type: "POST",
						url: "{:U('DisShopAgentOrder/cancelOrder')}",
						async: true,
						data: {
							id: $this.attr("data-id"),
							sid: sid,
						},
						success: function(response) {
							APP.alert(response.msg);
							if (response.error == 0) {
								window.location.href="{:U('DisShopAgentOrder/showOrder', 'id='.$order['id'].'&sid='.$sid)}";
							}
						},
						error: function() {
							APP.alert("网络错误，请重试！");
						}
					});
				}
			});
			return false;
		});
  })();
  
  $(function() {
		
	  $(".pr-good-list-title").on("click", function() {
	     $(this).parent().toggleClass("open");
	  });
	  
	  function showTotal() {
		  var actaulFee = order['goodsTotalPrice'] + order['shippingTotalPrice'];
		  $("#total-price").text(actaulFee+'元');
	  }
	  
	  function init() {
		  showTotal();
		  //选择配送方式更改订单总金额
		  var oDeliveryType = $ ( "#delivery-type" ),
	      	  oTotalPrice = $( "#total-price" );
		  oDeliveryType.change(function() {
			  order['shippingTotalPrice'] = totalShipping [$(this).val()]*1;
			  showTotal();
		  });
	  }
	 
	  init();
  });
  
</script>